<template>
  <div id="projectManagementItemTableContent">
    <div class="projectManagementItemTableContentFrom">
      <span class="projectManagementItemTableContentFromTitle">项目简称</span>
      <el-select
        filterable
        clearable
        v-model="serchobj.id"
        placeholder="请选择项目"
      >
        <el-option
          v-for="item in projectList"
          :key="item.projectShortName"
          :label="item.projectShortName"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <!-- <span class="projectManagementItemTableContentFromTitle">施工类型：</span>
      <el-select v-model="serchobj.applyOrgId" placeholder="请选择">
        <el-option label="钢弹簧" value="钢弹簧"> </el-option>
        <el-option label="预制轨道板" value="预制轨道板"> </el-option>
      </el-select> -->
      <!-- <span class="projectManagementItemTableContentFromTitle">计划状态：</span>
      <el-select v-model="serchobj.approveStatusCode" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        >
        </el-option>
      </el-select> -->
      <!-- <span class="projectManagementItemTableContentFromTitle">计划周期：</span>
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="serchobj.date"
        type="date"
        placeholder="选择日期"
      >
      </el-date-picker> -->
    </div>
    <div class="projectManagementItemTableContentBtn flex">
      <div>
        <el-button
          @click="approval(2)"
          type="primary"
          icon="el-icon-plus"
          >新增</el-button
        >
      </div>
      <div>
        <el-button
          type="primary"
          @click="serch()"
          >查询</el-button
        >
        <el-button @click="() => reset()">重置</el-button>
      </div>
    </div>
    <div class="projectManagementItemTableContentTable">
      <el-table
        :data="tableData"
        style="width: 100%"
        header-row-class-name="formTable"
        :border="true"
        @row-dblclick="clickRow"
      >
        <el-table-column
          fixed
          align="center"
          prop="projectShortName"
          label="项目简称"
          width="150"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="totalDistance"
          label="总里程/米"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="zyfw"
          label="作业范围"
          width="200"
        >
          <template slot-scope="scope">
            DK{{ scope.row.mileageStartKm }}+ {{ scope.row.mileageStartM }}~~
            DK{{ scope.row.mileageEndKm }}+{{ scope.row.mileageEndM }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ryfp"
          label="人员分配"
          width="250"
        >
          <template slot-scope="scope">
            <div class="update">
              <p
                style="color: rgb(64, 149, 229)"
                v-for="item in scope.row.engineeringJobAssigns"
                :key="item.name"
              >
                {{ item.name }}:{{ item.number }}{{ item.unit }}
              </p>

              <div class="updateBtn">
                <i
                  class="el-icon-edit"
                  style="font-size: 20px"
                ></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="wzfp"
          label="物资分配"
          width="250"
        >
          <template slot-scope="scope">
            <div class="update">
              <p
                style="color: rgb(64, 149, 229)"
                v-for="item in scope.row.materialAssigns"
                :key="item.name"
              >
                {{ item.name }}:{{ item.number }}{{ item.unit }}
              </p>
              <div class="updateBtn">
                <i
                  class="el-icon-edit"
                  style="font-size: 20px"
                ></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="jxsb"
          label="机械设备"
          width="250"
        >
          <template slot-scope="scope">
            <div class="update">
              <p
                style="color: rgb(64, 149, 229)"
                v-for="item in scope.row.equipmentEquipmentAssigns"
                :key="item.name"
              >
                {{ item.name }}:{{ item.number }}{{ item.unit }}
              </p>
              <div class="updateBtn">
                <i
                  class="el-icon-edit"
                  style="font-size: 20px"
                ></i>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="spzt"
          label="审批状态"
          width="100"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.approveStatusName }}</p>
            <el-button
              v-if="scope.row.isApprovePermission"
              type="text"
              @click="approvalIstrue(scope.row.id)"
              >审批</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="fzr"
          label="负责人"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="csr"
          label="抄送人"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="sgjd"
          label="施工进度"
          width="150"
        >
          <template slot-scope="scope">
            <p style="color: rgb(64, 149, 229)">
              {{ scope.row.workScheduling }}
            </p>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          prop="translate"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.approveStatusName"
              type="text"
              @click="sendKey(3, scope.row.id)"
              >查看</el-button
            >
            <!-- <el-button
                v-if="scope.row.canApprove == 1"
                type="text"
                @click="approval(scope.row.procInstId, scope.row.id)"
                >审批</el-button
              > -->
            <el-button
              type="text"
              @click="updete(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="projectManagementItemTableContentprojectManagementItemTableContent"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 10]"
        :page-size="serchobj.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      width="30%"
      title="新增"
      :visible.sync="innerVisible"
      append-to-body
      :destroy-on-close="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="项目简称"
          prop="projectShortName"
        >
          <el-input v-model="ruleForm.projectShortName"></el-input>
        </el-form-item>
        <el-form-item
          label="计划周期"
          prop="jhzq"
        >
          <el-date-picker
            v-model="ruleForm.jhzq"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="总里程/米"
          prop="totalDistance"
        >
          <el-input v-model="ruleForm.totalDistance"></el-input>
        </el-form-item>
        <el-form-item label="本次施工里程">
          <el-col :span="10">
            <el-col :span="4">
              <span style="width: 50px; display: block"> DK：</span></el-col
            >
            <el-col :span="8">
              <el-input v-model="ruleForm.mileageStartKm"></el-input>
            </el-col>
            <el-col
              :span="2"
              style="text-align: center"
            >
              +
            </el-col>

            <el-col :span="8">
              <el-input v-model="ruleForm.mileageStartM"></el-input>
            </el-col>
          </el-col>
          <el-col :span="14">
            <el-form-item
              label="到"
              label-width="20px"
            >
              <el-col :span="3">
                <span style="width: 50px; display: block"> DK：</span></el-col
              >
              <el-col :span="8">
                <el-input v-model="ruleForm.mileageEndKm"></el-input>
              </el-col>
              <el-col
                :span="2"
                style="text-align: center"
              >
                +
              </el-col>

              <el-col :span="8">
                <el-input v-model="ruleForm.mileageEndM"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item
          label="负责人"
          prop="fzr"
        >
          <el-select
            v-model="ruleForm.responsibleUserId"
            multiple
            style="margin-left: 20px"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="抄送人"
          prop="csr"
        >
          <el-select
            v-model="ruleForm.carbonCopyUserId"
            multiple
            style="margin-left: 20px"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      width="60%"
      title="审批"
      :visible.sync="approvalinner"
      append-to-body
      :destroy-on-close="false"
      :modal="false"
      class="approvaDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-steps
        class="approvaStep"
        :active="1"
      >
        <el-step
          title="审批"
          description="审批意见某某某"
        ></el-step>
        <el-step
          title="审批"
          description="审批意见某某某"
        ></el-step>
        <el-step
          title="审批"
          description="审批意见某某某"
        ></el-step>
      </el-steps>
      <el-form
        :model="approvaform"
        ref="approvaform"
        label-width="100px"
        class="demo-approvaform"
      >
        <el-form-item
          label="抄送人"
          prop="csr"
        >
          <el-radio-group v-model="approvaform.through">
            <el-radio label="同意"></el-radio>
            <el-radio label="终止"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            resize="none"
            v-model="approvaform.approvaform"
            style="width: 90%"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm2('approvaform')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getManagement,
  getManagementPage,
  addManagementPage,
  updateManagementPage,
} from '/src/http/inTellingSchedule/project.js'
import { getEnableUser } from '/src/http/scheduleCommand.js'
import { getDataType } from '/src/http/dictionary.js'
export default {
  props: ['getKey'],
  data() {
    return {
      options: [],
      userList: [],
      tableData: [],
      workLineTypeList: [],
      currentPage: 1,
      innerVisible: false,
      approvalinner: false,
      approvalinnerId: '',
      serchobj: {
        id: '',
        date: '',
        pageNum: 1,
        pageSize: 10,
      },
      approvaform: {
        through: '',
        desc: '',
      },
      ruleForm: {
        projectShortName: '',
        sgnx: '',
        jhzq: [],
        qtzy: '',
        totalDistance: '',
        mileageStartKm: '',
        mileageStartM: '',
        mileageEndKm: '',
        mileageEndM: '',
        responsibleUserId: '',
        carbonCopyUserId: '',
      },
      procInstId: '',
      total: 4,
      isupdateId: '',
      projectList: [],
    }
  },
  components: {},
  created() {},
  mounted() {
    this.initialize()
    this.serch()
  },
  methods: {
    handleSizeChange(val) {
      this.serchobj.pageSize = val
      this.serch()
    },
    handleCurrentChange(val) {
      this.serchobj.pageNum = val
      this.serch()
    },
    sendKey(num, id) {
      this.getKey(num, id)
    },
    //初始化
    initialize() {
      try {
        getManagement().then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.projectList = res.data
          }
          getEnableUser().then((res) => {
            this.userList = res.data
          })
          this.workLineTypeList = getDataType({
            type: 'ht_line_type',
          }).then((res) => {
            return res.data
          })
        })

        // this.weeklyPlanObj.tableData = await weekPlanGetPage().then((res) => {
        //   console.log(res);
        //   return res.data.records;
        // });
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
      getManagement
    },
    //搜索
    async serch() {
      // let obj = {};

      try {
        this.tableData = await getManagementPage(this.serchobj).then((res) => {
          console.log(res.data.records)
          if (res.code == 200) {
            this.total = res.data.total
            res.data.records.forEach((item) => {
              let csr = ''
              let fzr = ''
              let csrs = []
              let fzrs = []
              if (item.responsibleUsers) {
                item.responsibleUsers.forEach((i) => {
                  fzr = fzr + i.name + ' '
                  fzrs.push(i.id)
                })
              }
              if (item.carbonCopyUsers) {
                item.carbonCopyUsers.forEach((i) => {
                  csr = csr + i.name + ' '
                  csrs.push(i.id)
                })
              }
              if (!item.workScheduling) {
                item.workScheduling = '暂无统计'
              }
              item.csr = csr
              item.fzr = fzr
              console.log(csr)
            })
            return res.data.records
          }
        })
      } catch (error) {
        console.log('接口调用出错::: ', error)
      }
    },
    //审批
    async submitForm(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
      console.log(formName)

      await this.$confirm('确认添加新的计划吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          let obj = this.ruleForm
          obj.planCycleStart = obj.jhzq[0]
          obj.planCycleEnd = obj.jhzq[1]
          if (!this.isupdateId) {
            addManagementPage(obj).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '新增成功!',
                })
                this.serch()
              }
            })
          } else {
            obj.id = this.isupdateId
            updateManagementPage(obj).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: 'success',
                  message: '编辑成功!',
                })
                this.isupdateId = ''
                this.serch()
                this.innerVisible = false
              } else {
                this.$message({
                  type: 'waring',
                  message: '编辑失败!',
                })
                this.isupdateId = ''
                this.serch()
                this.innerVisible = false
              }
            })
          }
          //   try {
          //     dayPlanApprove(obj).then((res) => {
          //       if (res.code == 200) {
          //         this.$message({
          //           message: "审批完成",
          //           type: "success",
          //         });
          //       } else {
          //         this.$message.error(res.message);
          //       }
          //     });
          //   } catch (error) {
          //     console.log("接口调用出错::: ", error);
          //   }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    async submitForm2(formName) {
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     alert("submit!");
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });

      console.log(formName)
      await this.$confirm('确认审批吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          console.log(this.approvaform)
          this.tableData.forEach((item) => {
            if (item.id == this.approvalinnerId) {
              if (this.approvaform.through == '同意') {
                item.id = 1000
              } else {
                {
                  item.id = 1001
                }
              }
            }
            this.$message({
              type: 'success',
              message: '审批成功!',
            })
            this.approvalinner = false
          })
          //   try {
          //     dayPlanApprove(obj).then((res) => {
          //       if (res.code == 200) {
          //         this.$message({
          //           message: "审批完成",
          //           type: "success",
          //         });
          //       } else {
          //         this.$message.error(res.message);
          //       }
          //     });
          //   } catch (error) {
          //     console.log("接口调用出错::: ", error);
          //   }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    // 审批弹窗，数据回显
    async approval(procInstId, id) {
      this.innerVisible = true
      this.procInstId = id
      //   try {
      //     await getdayPlanById({ id: id }).then((res) => {
      //       if (res.code == 200) {
      //         if (res.data.pzzysjStart && res.data.pzzysjEnd) {
      //           res.data.pzzysj = [res.data.pzzysjStart, res.data.pzzysjEnd];
      //           this.ruleForm = res.data;
      //         }
      //       } else {
      //         this.$message.error(res.message);
      //       }
      //     });
      //   } catch (error) {
      //     console.log("接口调用出错::: ", error);
      //   }
    },
    approvalIstrue(id) {
      this.approvalinner = true
      this.approvalinnerId = id
    },
    async updete(id) {
      this.isupdateId = id
      this.tableData.forEach((item) => {
        if (item.id == id) {
          item.jhzq = [item.planCycleStart, item.planCycleEnd]
          this.ruleForm = JSON.parse(JSON.stringify(item))
          this.innerVisible = true
        }
      })
    },
    reset() {
      this.serchobj = {
        pageNum: 1,
        pageSize: 10,
        id: '',
      }
      this.serch()
    },
    clickRow(event) {
      console.log(event)
      // this.$router.push("/constructionPlan");
      this.getKey(4)
    },
  },
}
</script>

<style lang="less" scoped>
#projectManagementItemTableContent {
  .projectManagementItemTableContentFrom {
    margin-left: 3rem;
  }
  .projectManagementItemTableContentFromTitle {
    font-size: 14px;
    padding: 0 1rem;
    font-weight: 600;
  }
  .projectManagementItemTableContentBtn {
    margin: 1rem 4rem;
  }
  .projectManagementItemTableContentTable {
    width: 95%;
    margin: 0 auto;
    .update {
      //position: relative;
      height: 100%;
      .updateBtn {
        position: absolute;
        width: 2rem;
        height: 2rem;
        top: 1rem;
        right: 1rem;
        z-index: 200;
      }
    }
  }
  .projectManagementItemTableContentprojectManagementItemTableContent {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
  }
}
.approvaDialog {
  .approvaStep {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
<style lang="less">
#projectManagementItemTableContent {
  .el-table th.el-table__cell {
    background-color: transparent;
  }
}
</style>
